<template>
  <div>
    <div class="header flex-r">
			<router-link to="/" class="logo"> <p class="flex-r">Games <img src="~/static/image/c1.png" alt=" " /> Zone</p></router-link>
			<nav class="clearfix">
				<ul class="nav flex-r-end">
						<li v-for='(item,key) in nav'  :key='key' class="flex-r-center"  @mouseenter='NavEnter(item.url)' @mouseleave='NavLeave' :class="{'hover':hoverIndex==item.url,'active':item.url==path}"><router-link :to="item.url">{{item.name}}</router-link></li>
				</ul>
			</nav>
		</div>
    <nuxt/>
  </div>
</template>
<script>
import nav from '~/static/data/nav'
export default {
  data () {
    return {
      nav: nav,
      activeIndex: '',
      hoverIndex: ''
    }
  },
  methods: {
    NavEnter (url) {
      this.hoverIndex = url
    },
    NavLeave () {
      this.hoverIndex = ''
    }
  },
  created () {
    this.path = this.$route.path
  }
}
</script>

<style lang='scss' scoped>
.header {
	width: 100%;
	height:100px;
  background: url(~/static/image/banner3.jpg) no-repeat top left;
  background-size:cover;
  margin: 0 auto;
  padding: 0 20px;
  z-index:99;
}
.logo {
	width:250px;
	font-size: 28px;
	font-weight: bolder;
	color:#fff;
}
nav {
	padding-left: 40px;
	.nav {
		ul,li{
			list-style:none;
		}
		li {
			position: relative;
			width:20%;
			height:50px;
			cursor: pointer;
			min-width: 80px;
			color:#fff;
			font-size: 16px;
			font-weight: bold;
			box-sizing: border-box;
			&::before,&::after {
					position: absolute;
					left: 0;
					width: 100%;
					height: 2px;
					background: #fff;
					content: '';
					opacity: 0;
					transition: opacity 0.5s, transform 0.5s;
				}
					&::before {
						top:0;
						transform: translateY(-10px);
					}
					&::after {
						bottom:0;
						transform: translateY(10px);
					}
			&.hover {
				&::before,&::after {
					opacity: 1;
					transform: translateY(0px);
				}
			}
			&.active {
				color:#E91E63;
			}
			// &:hover {
			// 	border-bottom: 2px solid #fff;
			// 	border-top: 2px solid #fff;
			// 	color: #fff;
			// }
		}
	}
}
/*-- Navbar --*/
.navbar {
	margin-bottom: 0;
	position: absolute;
	z-index: 99999;
	background:transparent;
	border: none;
	border-radius: 0;
	width: 100%;
	padding: 10px 0;
}
.navbar-header h1{
	color:#fff;
	font-size:40px;
}
.navbar-header img{
	width:22%;
}
.navbar-nav>li {
	padding: 5px 15px;
}

.navbar-default .navbar-nav>li>a {
	color: #fff;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	color: #FFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #E91E63;
    background-color: transparent;
}
</style>

